Boxelemente
Aufgabe
Öffne die Seite liveweave.com. Es handelt sich um einen Online-Editor, in dem wir unsere Webseiten erstellen und formatieren können. Kopiere nun den folgenden Code (Markieren mit STRG + A und kopieren mit STRG + C) und kehre zum Editor zurück. Markiere den Text im linken oberen Bereich und kopiere den Quelltext unserer Seite dort hinein (STRG + V). Im rechten unteren Bereich siehst du nun den unformatierten Text. Im linken unteren Bereich können wir nun unsere CSS-Anweisungen eingeben und das Ergebnis sofort überprüfen.
Code zum Kopieren (auf Pfeil klicken)
- <!DOCTYPE>
- <html lang="de">
- <head>
- <meta charset="utf-8">
- </head>
- <body>
- <p id="absatz1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum augue nulla, mattis ut, pulvinar ut, suscipit nec, neque. Suspendisse vulputate, ligula vitae dignissim sollicitudin, metus ipsum adipiscing mi, vitae congue arcu mauris sit amet tellus. Morbi suscipit, lacus in posuere ornare, pede dui condimentum dolor, ut consequat neque metus in mi. Pellentesque id mauris. Nulla viverra. Aenean accumsan tincidunt tortor. Fusce ultrices sem at neque.
- </p>
- <p id="absatz2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla a dui a leo eleifend venenatis. Curabitur nisl mauris, ultrices at, sollicitudin at, euismod imperdiet, pede. Vivamus elementum elit vitae libero. Aliquam erat volutpat. Donec blandit. Pellentesque id lectus. Maecenas lobortis nibh non libero. Cras sed mauris. Praesent eu lacus. Phasellus et justo eu sem congue facilisis.
- </p>
- </body>
- </html>
Es sollen nun folgende Formatvorgaben gelten:
- Überschrift
- Breite der Box:630px
- Höhe der Box:50px
- Außenabstand links:180px
- Außenabtand oben:140px
- Außenabstand unten:210px
- Hintergrundfarbe:#FFCC99
- Schriftgröße:36px
- Schriftfarbe:weiß
- Innenabstand:10px
- x
- Absatz1
- Breite der Box:700px
- Außenabstand links:100px
- Außenabstand unten:80px
- Hintergrundfarbe:#F3E3C7
- Rand: 2px breit, durchgezogen und schwarz
- Innenabstand:5px
- x
- Absatz2
- Breite der Box:700px
- Außenabstand links:200px
- Hintergrundfarbe:#FFCC66
- Rand: 2px breit, durchgezogen und grau
- Innenabstand:5px
- x
- Body
- Hintergrundfarbe:schwarz
- Hintergrundbild: background-image:url(http://www.schiller-bernd.de/Colosseum_Rom.jpg)
- Hintergrund-Wiederholung: background-repeat:no-repeat
Über "Tools - Download - Download this weave as a single HTML file" kann das Ergebnis lokal gespeichert werden.